<script lang="ts"></script>

<template>
  <scroll-view scroll-y @scrolltolower="onLowestOfScroll" class="scroll-view">
    <view>
      <uni-card
        v-for="(item, index) in pageResult.list"
        :key="index"
        class="itemCard"
      >
        <template v-slot:title>
          <view class="card-header-box">
            <view class="title">{{ item.title }} </view>
            <view class="extra"> {{ item.briefIntroduction }}</view>
          </view>
        </template>
        <navigator
          :url="`/pages/contributeDetail/contributeDetail?id=${item.id}`"
          open-type="navigate"
          hover-class="navigator-hover"
        >
          <view class="card-content">
            <image :src="item.picture" />
            <view class="detail-box">
              <text class="detail">{{ item.summary }} </text>
            </view>
          </view>
        </navigator>
        <view class="button-box">
          <view
            ><button
              class="btn accept"
              @tap="submitContributeJudgeByButton(item, 1)"
            >
              通过
            </button></view
          >
          <view
            ><button
              class="btn reject"
              @tap="submitContributeJudgeByButton(item, 0)"
            >
              拒绝
            </button></view
          >
        </view>
      </uni-card>
    </view>
    <view class="loading-text" @tap="onLowestOfScroll"
      >{{ isFinish ? "结束了啦" : "正在加载...没有反应？点我主动加载" }}
    </view>
  </scroll-view>
</template>

<script lang="ts" setup>
import {
  getContributeJudgePageResultApi,
  submitContributeJudge,
} from "@/api/content/contributeJudge";
import type {
  ContributePageRequestDTO,
  ContributeJudgeSubmitDTO,
  PageResult,
  ContributeJudge,
} from "@/types/contributeJudge";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";

// 请求的信息
const pageQuery = ref<ContributePageRequestDTO>({
  judgeState: 20101,
  pageNo: 1,
  pageSize: 10,
});

// 请求信息
const isFinish = ref(false);
const pageResult = ref<PageResult>({
  total: 1, // total实际上后端没有返回
  pages: 0,
  list: [],
});

// 选择情况
const selectOptions = ref({
  restrict: [],
  title: "",
});

// 获取数据的逻辑函数
const addPageResult = () => {
  // 到达底部的判断
  if (pageResult.value.total! <= pageResult.value.list!.length) {
    // 只展示一次
    uni.showToast({
      title: "到达最底啦",
      duration: 2000,
    });

    return;
  }
  // 获取
  getMore();
};
// 真正获取数据的执行函数
const getMore = async () => {
  // 构造query
  let query: ContributePageRequestDTO = pageQuery.value;
  console.log("selectOptions", selectOptions);

  query.title = selectOptions.value.title;
  pageQuery.value = query;
  const res = await getContributeJudgePageResultApi(query);
  console.log("res:", res, res.data);

  // 记录新数据
  pageResult.value.list = pageResult.value.list!.concat(res.data.list!);
  pageResult.value.total = res.data.total;
  if (pageResult.value.total === pageResult.value.list.length) {
    isFinish.value = true;
  }

  // 往后来一页
  if (pageQuery.value.pageNo != null) {
    pageQuery.value.pageNo = pageQuery.value.pageNo + 1;
  }
};

// 滑动到最底部的时候
const onLowestOfScroll = () => {
  console.log("到达最底部");
  addPageResult();
};

// 启动查询
const onSelectSearch = () => {
  console.log("进行查询");
  //reset
  pageQuery.value.pageNo = 1;
  isFinish.value = false;
  pageResult.value.list = [];
  pageResult.value.total = 1;
  getMore();
};

// ## 审核内容
const submitContributeJudgeByButton = async (
  item: ContributeJudge,
  judgeResult: number
) => {
  var contributeJudgeSubmit: ContributeJudgeSubmitDTO = {};
  contributeJudgeSubmit.contributeJudgeId = item.id;
  if (judgeResult === 1) {
    contributeJudgeSubmit.judgeResult = 20102;
  } else if (judgeResult === 0) {
    contributeJudgeSubmit.judgeResult = 20103;
  }
  // 提交
  var res = await submitContributeJudge(contributeJudgeSubmit);

  uni.redirectTo({
    url: "judge", //这是你的当前页面地址
  });

  if (res.code === 1) {
    uni.showToast({
      title: "提交完毕",
      duration: 1000,
      mask: true,
    });
  } else {
    uni.showToast({
      title: "提交完毕",
      duration: 1000,
      icon: "error",
      mask: true,
    });
  }
};

// 启动时候执行
onLoad(() => {
  getMore();
});
</script>

<style lang="scss">
page {
  height: 100%;
}

.text {
  font-size: 12px;
  color: #666;
}
.options {
  padding-left: 10rpx;
  padding-right: 10rpx;
  padding-bottom: 10rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  .titleInput {
    flex: 1 0;
    padding-right: 20rpx;
  }
  button {
    font-size: small;
    color: #c0edff;
    background-color: #686d6d;
  }
}

.scroll-view {
  flex: 1;
}
.itemCard {
  .card-header-box {
    text-align: center;
    display: flex;
    justify-content: space-between;
    margin: 10px;
    padding-bottom: 5px; /* 给底部边框留一点内边距 */
    border-bottom: 1px solid #e0e0e0; /* 绘制下方的线 */
    .title {
      text-align: center;
      font-weight: bold;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 200px; /* 控制标题最大宽度，避免文字过长 */
    }
    .extra {
      font-size: 12px;
      text-align: center;
      color: #999;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100px; /* 控制标题最大宽度，避免文字过长 */
    }
  }

  .card-content {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;

    .detail-box {
      max-width: 200px;
      .detail {
        margin: 10px;
        text-align: center;
      }
      overflow: hidden;
      text-overflow: ellipsis;
    }

    image {
      object-fit: contain;
      border-radius: 10rpx;
      height: 200rpx;
      width: 200rpx;
      margin: 10rpx;
    }
  }

  .button-box {
    display: flex;
    gap: 10px; /* 按钮之间的间距 */
    .btn {
      font-size: 16px;
      font-weight: bold;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s, box-shadow 0.3s; /* 添加过渡效果 */
    }

    /* 接受按钮样式 */
    .btn.accept {
      background-color: #4caf50; /* 绿色 */
      color: white;
    }

    .btn.accept:hover {
      background-color: #45a049; /* 悬停时的颜色 */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 悬停时的阴影 */
    }

    /* 拒绝按钮样式 */
    .btn.reject {
      background-color: #f44336; /* 红色 */
      color: white;
    }

    .btn.reject:hover {
      background-color: #d32f2f; /* 悬停时的颜色 */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 悬停时的阴影 */
    }
  }
}

.loading-text {
  margin: 20px;
  text-align: center;
  font-size: 28rpx;
  color: #666;
}
</style>
